<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow">
        <!--时间日期-->
        <div class="btn-group tool-button mt5">
            <el-date-picker
                    v-model="searchDate"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="medium"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
        </div>
        <!--按赛事阶段搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.stage" placeholder="请选择赛事阶段"
                       size="medium"
            >
                <el-option
                        v-for="item in matchStageOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <!--按联赛或主、客队搜索-->
        <div class="btn-group tool-button mt5">
            <el-input v-model="pageForm.searchKeyword" @keyup.enter.native="doSearch"
                      placeholder="联赛、主队、客队、mid" size="medium"></el-input>
        </div>
        <!--搜索按钮-->
        <div class="btn-group tool-button mt5">
            <el-button slot="append" icon="el-icon-search" @click="doSearch" size="medium"></el-button>
        </div>
        <!--爬取指定日期赛果-->
        <div class="pull-right offscreen-right mt5">
            <el-button size="medium" @click="crawlMatchResult" title="(重新)获取指定时间区间内的赛果">获取赛果</el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                size="small"
                header-align="center"
                style="width: 100%"

        >
            <el-table-column
                    prop="mid"
                    label="mid"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="league"
                    label="所属联赛"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="主队"
                    prop="home"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="custom"
                    label="客队"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    sortable
                    label="阶段"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.stage==null">待补充</span>
                    <span v-else-if="scope.row.stage=='future'">明日</span>
                    <span v-else-if="scope.row.stage=='browse'">今日</span>
                    <span v-else-if="scope.row.stage=='finished'">已结束</span>
                    <span v-else-if="scope.row.stage=='other'">赛事异常</span>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    prop="dateTime"
                    label="时间(美东)"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="hInBallFull"
                    label="主队全场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="hInBallHalf"
                    label="主队半场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="cInBallFull"
                    label="客队全场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="cInBallHalf"
                    label="客队半场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <!--修改时间-->
            <el-table-column
                    prop="opAt"
                    label="修改时间"
                    header-align="center"
                    align="center"
                    width="120px">
                <template slot-scope="scope">
                    {{formatAt(scope.row.opAt)}}
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120"
                    align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided
                                              :command="{type:'edit',id:scope.row.id, matchType: scope.row.type}">
                                {{scope.row.stage === 'finished' || scope.row.stage === 'other'? '查看' : '修改'}}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--分页容器-->
    <el-row class="el-pagination-container">
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
    <!--查看/修改赛果弹出窗-->
    <el-dialog
            title="赛果详情"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false"
            @close="resetEdit"
            width="50%">

        <div style="line-height: 40px; margin-bottom: 10px">
            <div>{{formData.home}} <span style="font-weight: bold;font-size: large"> VS </span> {{formData.custom}}</div>
            <div>{{formData.dateTime}}(美东时间)</div>
            阶段：
            <el-select v-model="formData.stage" placeholder="阶段" size="medium" @change="changeTableStage"
                       :disabled="!editAble || matchStageSnapShot == 'other'">
                <el-option v-for="(item,index) in stageArr"
                           :key="item.key"
                           :label="item.label"
                           :value="item.value"
                           :disabled="index < thisIndex"
                ></el-option>
            </el-select>
            <!--强制解锁按钮-->
            <span class="pull-right" v-if="(formData.stage == 'future' || formData.stage == 'browse') && !editAble">
                <el-tooltip content="解锁修改赛果" placement="top" effect="light">
                    <el-button @click="unlock()" size="medium" type="warning" icon="el-icon-lock"></el-button>
                </el-tooltip>
            </span>
        </div>

        <el-table
                ref="multipleTable"
                :data="resultData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    :selectable="() => editAble"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="比赛阶段">
            </el-table-column>
            <el-table-column
                    prop="resultH"
                    :label='formData.home'>
                <template slot-scope="scope">
                    <el-input v-if="formData.stage == 'other'" :disabled="!editAble" v-model="scope.row.resultH" size="small"
                              placeholder="请输入内容"></el-input>
                    <el-input-number v-else-if="formData.stage != 'other' && editAble" v-model="scope.row.resultH"
                                     size="small"
                                     :min="0" :max="99" label="分数"></el-input-number>
                    <span v-else>{{scope.row.resultH}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="resultC"
                    :label='formData.custom'>
                <template slot-scope="scope">
                    <el-input v-if="formData.stage == 'other'" :disabled="!editAble"  v-model="scope.row.resultC" size="small"
                              placeholder="请输入内容"></el-input>
                    <el-input-number v-else-if="formData.stage != 'other' && editAble" v-model="scope.row.resultC"
                                     size="small"
                                     :min="0" :max="99" label="分数"></el-input-number>
                    <span v-else>{{scope.row.resultC}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!--        确认/取消 提交修改按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false" v-show="editAble">取 消</el-button>
            <el-button type="primary" @click="doEdit" v-show="editAble">确 定</el-button>
            <el-button type="primary" v-show="!editAble" @click="editDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

</div>
<script src="${base!}/assets/platform/js/sha256.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var self = this;
            return {
                thisIndex: 0,
                stageArr: [
                    {
                        label: '早盘',
                        key: 'future',
                        value: 'future'
                    }, {
                        label: '今日',
                        key: 'browse',
                        value: 'browse'
                    }, {
                        label: '已结束',
                        key: 'finished',
                        value: 'finished'
                    }, {
                        label: '其他',
                        key: 'other',
                        value: 'other'
                    }],
                matchStageOptions: [{
                    value: '',
                    label: '赛事阶段'
                }, {
                    value: 'browse',
                    label: '今日'
                }, {
                    value: 'future',
                    label: '明日'
                }, {
                    value: 'finished',
                    label: '已结束'
                }, {
                    value: 'other',
                    label: '赛事异常'
                }],
                pickerOptions: {
                    disabledDate: function (time) {
                        return time.getTime() > new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000);
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'weeks').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-3, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                searchDate: [],
                addDialogVisible: false,
                editDialogVisible: false,
                tableData: [],
                pageForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    searchDate: "",
                    matchType: "",
                    stage: "",
                },
                formData: {
                    stage: "future"
                },
                matchStageSnapShot: '',// 记录赛事最初的状态
                version: 0,
                editAble: false,
                resultData: [], // 点击修改/查看弹出窗中该场比赛的数据(弹窗中不是表单是表格)
                football: [
                    {
                        remark: "半场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO4'
                    }, {
                        remark: "全场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO8'
                    }],
                checkData: new Map(), // 修改赛果弹出窗中勾选的数据
            }
        },
        methods: {
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate) {
                    self.pageForm.searchDate = self.searchDate.toString();
                } else {
                    self.pageForm.searchDate = "";
                }
                self.pageForm.start = self.pageForm.searchDate.split(',')[0];
                self.pageForm.end = self.pageForm.searchDate.split(',')[1];
                $.post(base + "/platform/crown/match/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            // 爬取赛果按钮
            crawlMatchResult: function () {
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate.length === 0) {
                    self.$message({
                        message: "请选择要爬取的日期",
                        type: 'error'
                    });
                    return;
                }
                self.pageForm.searchDate = self.searchDate.toString();
                $.post(base + "/platform/crown/match/crawlMatchResult", self.pageForm, function (data) {
                    if (data.code === 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        sublime.closeLoadingbar();//关闭loading
                        self.doSearch();
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doEdit: function () { // 提交新增/修改
                let self = this;
                if (!this.checkResult()) {
                    return;
                }
                // 赋值主客队比分
                let half = self.checkData.get('NO4');
                let full = self.checkData.get('NO8');
                self.formData.hInBallHalf = half.resultH;
                self.formData.cInBallHalf = half.resultC;
                self.formData.hInBallFull = full.resultH;
                self.formData.cInBallFull = full.resultC;
                // 主客队、联赛名置空
                self.formData.home = "";
                self.formData.custom = "";
                self.formData.league = "";
                $.post(base + "/platform/crown/match/editDo", self.formData, function (data) {
                    if (data.code == 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.doSearch();
                        self.editDialogVisible = false;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            // 校验比分
            checkResult: function () {
                let self = this;
                if (self.formData.stage !== 'finished' && self.formData.stage !== 'other') {
                    self.$message({
                        message: "赛事阶段请选择【已结束】或者【其他】",
                        type: 'error'
                    });
                    return false;
                }
                if (self.checkData.size !== 2) {
                    self.$message({
                        message: "请勾选数据全部再提交",
                        type: 'error'
                    });
                    return false;
                }
                if (self.formData.stage === 'finished') {
                    // 校验半场比分是否小于全场比分
                    let half = self.checkData.get('NO4');
                    let full = self.checkData.get('NO8');
                    if (half.resultH > full.resultH || half.resultC > full.resultC) {
                        self.$message({
                            message: "半场比分不能大于全场比分",
                            type: 'error'
                        });
                        return false;
                    }
                }
                return true;
            },
            // 查看、修改投资记录
            dropdownCommand: function (command) {
                var self = this;
                $.post(base + "/platform/crown/match/edit?id=" + command.id, function (data) {
                    if (data.code === 0) {
                        // 记录赛事stage快照
                        self.matchStageSnapShot = data.data.stage;
                        // 赛事如果已经结束，把比分赋值给self.football
                        if (data.data.stage === 'finished' || data.data.stage === 'other') {
                            self.football.forEach(item => {
                                if (item.tag === 'NO4') {
                                    item.resultH = data.data.hInBallHalf;
                                    item.resultC = data.data.cInBallHalf;
                                } else if (item.tag === 'NO8') {
                                    item.resultH = data.data.hInBallFull;
                                    item.resultC = data.data.cInBallFull;
                                }
                            });
                            self.resultData = JSON.parse(JSON.stringify(self.football));
                        }
                        // 赛事没结束要清空self.resultData
                        else {
                            self.resultData.splice(0, self.resultData.length);
                        }
                        self.formData = data.data;// 加载后台表单数据
                        self.editDialogVisible = true;// 打开编辑窗口
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                let self = this;
                val.forEach(item => {
                    self.checkData.set(item.tag, item);
                });
            },
            // 查看/修改赛果弹窗切换赛事阶段事件
            changeTableStage(e) {
                // 修改赛果时如果切换到‘其他’，表格数据源resultData比分清空
                if (e === 'other') {
                    this.resultData.forEach(val => {
                        val.resultC = '';
                        val.resultH = ''
                    });
                } else {
                    this.updateResultData();
                }
                this.formData.stage = e;
                this.$refs.multipleTable.clearSelection();
            },
            resetEdit() {
                let self = this;
                self.editAble = false;
                self.formData.hInBallHalf = "";
                self.formData.cInBallHalf = "";
                self.formData.hInBallFull = "";
                self.formData.cInBallFull = "";
            },
            changeVersion: function () {
                let command = {};
                command.type = 'edit';
                command.remark = 'changeVersion';
                command.id = this.formData.id;
                command.oldVersion = this.version;
                this.dropdownCommand(command);
            },
            // 解锁按钮
            unlock() {
                let self = this;
                this.$confirm('是否确认修改赛果', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    self.editAble = true;
                    // 解锁将resultData各个球队得分置为0
                    self.updateResultData();
                    // 记录stage的index
                    for (let i = 0; i < self.stageArr.length; i++) {
                        if (self.stageArr[i].key === self.formData.stage) {
                            self.thisIndex = i;
                            break;
                        }
                    }
                }).catch(() => {
                });
            },
            updateResultData() {
                let self = this;
                self.football.forEach(item => {
                    item.resultH = 0;
                    item.resultC = 0;
                });
                self.resultData = JSON.parse(JSON.stringify(self.football));
            }
        },
        created: function () {
            this.pageData();
        }
    });
</script>

<!--#
}
#-->